<template>
  <template v-if="col.prop !== 'operate'">
    <img
      v-if="col.elementType === 'img'"
      :src="row[col.prop]"
      :class="isFunction(col.class) ? col.class(row) : ['w-50', 'h-50', 'radius-3']"
      :style="isFunction(col.style) ? col.style(row) : {}"
    />
    <span
      v-else
      :class="isFunction(col.class) ? col.class(row) : []"
      :style="isFunction(col.style) ? col.style(row) : {}"
    >
      {{ isFunction(col.transform) ? col.transform(row, col): row[col.prop] }}
    </span>
  </template>
  <div v-else>
    <span
      v-for="(btn, i) in col.options"
      :key="i"
      :class="i > 0 ? 'ml-15' : ''"
    >
      <template v-if="!Array.isArray(btn.dropdownMenu)">
        <el-button
          v-if="isFunction(btn.hasPermission) ? btn.hasPermission(row) : true"
          :size="btn.size || 'mini'"
          :type="btn.type || 'text'"
          :disabled="isFunction(btn.disabled) ? btn.disabled(row) : btn.disabled"
          @click.stop="handleBtnClick({ row: row, label: btn.label })"
        >
          {{ btn.label }}
        </el-button>
      </template>
      <template v-else>
        <el-dropdown
          v-if="isFunction(btn.hasPermission) ? btn.hasPermission(row) : true"
          :trigger="btn.trigger || 'hover'"
          @command="handleCommand"
        >
          <span class="el-dropdown-link cursor-pointer font-12 color-primary">
            {{ btn.label }}
            <i class="el-icon-arrow-down"></i>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item
                v-for="(menuItem, i) in btn.dropdownMenu"
                :key="i"
                :command="{
                  row: row,
                  label: btn.label,
                  currentMenu: menuItem.label,
                }"
                :icon="menuItem.icon"
                @click.stop="handleBtnClick({ row: row, label: btn.label, currentMenu: menuItem.label})"
              >
                {{ menuItem.label }}
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </template>
    </span>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'RenderRow',
  props: {
    row: {
      type: Object,
      default: () => ({}),
    },
    col: {
      type: Object,
      default: () => ({}),
    },
  },
  emits: ['btn-click', 'command'],
  setup(props, { emit }) {
    // 判断是否函数
    const isFunction = (fn: any) => {
      return typeof fn === 'function';
    };
    // 操作栏按钮点击事件
    const handleBtnClick = (detail: any) => {
      emit('btn-click', detail);
    };
    // 操作栏下拉菜单点击事件
    const handleCommand = (command: any) => {
      emit('command', command);
    };
    return {
      isFunction,
      handleBtnClick,
      handleCommand,
    };
  },
});
</script>

<style lang="css" scoped>
.w-50 {
  width: 50px;
}
.h-50 {
  height: 50px;
  vertical-align: middle;
}
.radius-3{
  border-radius: 3px;
}
.ml-15 {
  margin-left: 15px;
}
.cursor-pointer {
  cursor: pointer;
}
.color-primary {
  color: #409eff;
}
</style>